/**
 * Created by showtan on 2018/12/27.
 * Tab
 */

import HomePage from '../pages/home';
import MessagePage from '../pages/message';
import MinePage from '../pages/mine';
import Images from '../constants/Images';
// const TabBarComponent = (props) => (<View style={{ paddingHorizontal: 3 }}>
//   <View style={{ position: 'absolute', top: -2, right: -2, backgroundColor: 'pink', width: 12, height: 12, borderRadius: 6, justifyContent: 'center', alignItems: 'center' }}>
//     <Text style={{ fontSize: 8 }}>{props.test.num}</Text>
//   </View>
//   <Image source={Images.tab.icon_mine} style={{ width: 20, height: 20, tintColor }} />
// </View>);
const TabNav = createBottomTabNavigator({
  Home: {
    screen: HomePage,
    navigationOptions: ({ navigation }) => (
      {
        title: '首页',
        tabBarIcon: ({ tintColor }) => (
          <Image source={Images.tab.icon_home} style={{ width: adapt(18), height: adapt(18), tintColor }} />
        )
      }
    )
  },
  Message: {
    screen: MessagePage,
    navigationOptions: ({ navigation, screenProps }) => (
      {
        title: '小视频',
        tabBarIcon: ({ tintColor }) => (
          <View style={{ paddingHorizontal: adapt(3) }}>
            {screenProps > 0 && <View style={{ position: 'absolute', zIndex: 99, top: isIOS ? -adapt(1) : 0, right: 0, backgroundColor: '#f62d33', width: adapt(11), height: adapt(11), borderRadius: adapt(5.5), justifyContent: 'center', alignItems: 'center' }}>
              <Text style={{ fontSize: adapt(8), color: '#fff' }}>{screenProps}</Text>
            </View>}
            <Image source={Images.tab.icon_videoS} style={{ width: adapt(25), height: adapt(25), tintColor }} />
          </View>
        )
      }
    )
  },
  Mine: {
    screen: MinePage,
    navigationOptions: ({ navigation }) => (
      {
        title: '我的',
        tabBarIcon: ({ tintColor }) => (
          <Image source={Images.tab.icon_mine} style={{ width: adapt(20), height: adapt(20), tintColor }} />
        )
      }
    )
  }
}, {
    tabBarOptions: {
      //当前选中的tab bar的文本颜色和图标颜色
      activeTintColor: '#e40203',
      //当前未选中的tab bar的文本颜色和图标颜色
      inactiveTintColor: '#333',
      //是否将文本转换为大小，默认是true
      upperCaseLabel: true,
      //material design中的波纹颜色(仅支持Android >= 5.0)
      pressColor: '#e40203',
      //按下tab bar时的不透明度(仅支持iOS和Android < 5.0).
      pressOpacity: 0.8,
      //tab bar的样式
      style: {
        backgroundColor: '#f7f8fa',
        paddingBottom: StyleSheet.hairlineWidth,
        borderTopWidth: 0.2,
        paddingTop: adapt(1),
        borderTopColor: '#ccc',
      },
      //tab bar的文本样式
      labelStyle: {
        height: adapt(16),
        lineHeight: 16,
        fontSize: adapt(12),
        margin: adapt(1)
      },
      tabStyle: {
        height: adapt(50)
      },
      //tab 页指示符的样式 (tab页下面的一条线).
      indicatorStyle: { height: 0 },
    },
    shifting: true,
    barStyle: { backgroundColor: '#f7f8fa' },
    //tab bar的位置, 可选值： 'top' or 'bottom'
    tabBarPosition: 'bottom',
    // activeColor: '#f0edf6',
    // inactiveColor: '#3e2465',
    //是否允许滑动切换tab页
    swipeEnabled: true,
    //是否在切换tab页时使用动画
    animationEnabled: true,
    //是否懒加载
    lazy: true,
    //返回按钮是否会导致tab切换到初始tab页？ 如果是，则设置为initialRoute，否则为none。 缺省为initialRoute。
    backBehavior: 'none',
    initialRouteName: 'Home',
  });

export default TabNav;